import React, { useState, useRef } from "react";
import Perfectmessage from "./Perfectmessage";
import Perfectmessagetwo from "./Perfectmessagetwo";
import Perfectmessagethree from "./Perfectmessagethree";

const Index = () => {
  const formARef = useRef<any>();
  // console.log("aaa", formARef);
  const formBRef = useRef<any>();
  const formCRef = useRef<any>();
  const [active, setActive] = useState<"one" | "two" | "three">("one");
  const [data, setData] = useState({});

  const btn = async (key: "one" | "two" | "three") => {
    let newData = { ...data };
    if (key === "two") {
      const resA = await formARef.current?.validateFields();
      newData = { ...newData, ...resA };
      // console.log(newData);
    }
    if (key === "three") {
      const resB = await formBRef.current?.validateFields();
      // console.log(resB);
      newData = { ...newData, ...resB };
    }
    setData(newData);
    setActive(key);
  };

  // console.log(data);

  return (
    <div className="login">
      {active === "one" && (
        <Perfectmessage btn={btn} ref={formARef} buffer={data} />
      )}
      {active === "two" && (
        <Perfectmessagetwo btn={btn} ref={formBRef} buffer={data} />
      )}
      {active === "three" && (
        <Perfectmessagethree btn={btn} ref={formCRef} buffer={data} />
      )}
    </div>
  );
};
export default Index;
